<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="btn">
            <!-- <el-button size="medium" type="primary" @click="add()"><i class="el-icon-circle-check"></i>全选</el-button> -->
            <!-- <div class="title" @click="checkAll">
                <i class="el-icon-circle-check"></i>全选
            </div>
            <div class="title" @click="noAll">
                <i class="el-icon-circle-close"></i>全否
            </div> -->
            <!-- <div class="title" @click="copyAll">
                <i class="el-icon-document-copy"></i>复制
            </div> -->
            <!-- <div class="title" @click="saveAll">
                <i class="el-icon-folder-opened"></i>保存
            </div> -->
        </div>
        <div class="table">
            <div class="table-left">
                <el-table
                    border
                    :data="roleTable"
                    :cell-style="cellStyle"
                    :header-cell-style="rowClass"
                >
                    <el-table-column type="index" label="序号" width="60px"></el-table-column>
                    <el-table-column label="角色">
                        <template slot-scope="scope">
                            <span
                                style="display:block;cursor:pointer;"
                                :class="selIndex==scope.$index?'sel-tab':'nor-tab'"
                                @click="selRole(scope.$index, scope.row)"
                            >{{ scope.row.roleName }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="selIndex === 0" class="table-right tc">
                <h2>超级管理员，无需设置权限</h2>
            </div>
            <div class="table-right" v-else>
                <!-- <el-table
                    border
                    :data="authorityTable"
                    :header-cell-style="rowRightClass"
                >
                    
                    <el-table-column label="功能模块" width="220px">
                        <template slot-scope="scope">
                            <span
                                style="display:block;cursor:pointer;"
                            >{{ scope.row.authorityName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="权限设置">
                        <template slot-scope="scope">
                            <el-checkbox-group
                                v-model="scope.row.authorityValue"
                            >
                                <el-checkbox
                                    v-for="(item,index) in scope.row.authoritySetting"
                                    :label="item.authorityLable"
                                    :key="index"
                                @change="handleCheckedCitiesChange(scope.$index, scope.row,index,item)"
                                >{{item.authority}}</el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-table-column>
                </el-table> -->
                <el-table
                    v-if="jurisdiction.update_state === 1"
                    :data="authorityTable"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    default-expand-all
                    :header-cell-style="rowRightClass"
                    :load="one"
                    :tree-props="{children: 'children'}">
                    <el-table-column
                        prop="module"
                        label="功能模块"
                        width="140">
                    </el-table-column>
                    <el-table-column label="权限设置">
                        <template slot-scope="scope">
                            <el-checkbox v-show="scope.row.select_state !== undefined" @change="selectChange(scope.$index, scope.row)" v-model="scope.row.select_state" :true-label="1" :false-label="2">查询</el-checkbox>
                            <el-checkbox v-show="scope.row.delete_state !== undefined" @change="deleteChange(scope.$index, scope.row)" v-model="scope.row.delete_state" :true-label="1" :false-label="2">删除</el-checkbox>
                            <el-checkbox v-show="scope.row.update_state !== undefined" @change="updateChange(scope.$index, scope.row)" v-model="scope.row.update_state" :true-label="1" :false-label="2">修改</el-checkbox>
                            <el-checkbox v-show="scope.row.add_state !== undefined" @change="addChange(scope.$index, scope.row)" v-model="scope.row.add_state" :true-label="1" :false-label="2">添加</el-checkbox>
                            <el-checkbox v-show="scope.row.export_state !== undefined" @change="exportChange(scope.$index, scope.row)" v-model="scope.row.export_state" :true-label="1" :false-label="2">导出</el-checkbox>
                            <!-- <el-checkbox v-show="scope.row.have_child !== undefined" @change="haveChange(scope.$index, scope.row)" v-model="scope.row.have_child" :true-label="1" :false-label="2">二级菜单</el-checkbox> -->
                        </template>
                    </el-table-column>
                </el-table>
                <span v-else>
                    <h2>没有权限</h2>
                </span>
            </div>
        </div>
        <div style="height:20px;"></div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
export default {
    data() {
        return {
            jurisdiction: null,
            selIndex: 0, //选中的角色选项
            roleTable: [
                {   
                    id: 1,
                    roleName: "超级管理员"
                },
                {
                    id: 2,
                    roleName: "经理"
                },
                {
                    id: 3,
                    roleName: "经理助理"
                },
                {
                    id: 4,
                    roleName: "财务"
                },
                // {
                //     roleName: "品宣经理"
                // },
                // {
                //     roleName: "策划"
                // },
                // {
                //     roleName: "人事经理"
                // },
                // {
                //     roleName: "执行副总"
                // },
                // {
                //     roleName: "运营总经理"
                // },
                // {
                //     roleName: "运营总助理"
                // },
                // {
                //     roleName: "市场经理"
                // },
                // {
                //     roleName: "市场业务经理"
                // },
                // {
                //     roleName: "招商经理"
                // },
                // {
                //     roleName: "招商业务经理"
                // },
                // {
                //     roleName: "客服主管"
                // },
                // {
                //     roleName: "招商客服"
                // },
                // {
                //     roleName: "售后客服"
                // },
                // {
                //     roleName: "维护专员"
                // },
                // {
                //     roleName: "维修专员"
                // },
                // {
                //     roleName: "加盟商"
                // },
                // {
                //     roleName: "加盟商员工"
                // }
            ],
            defaultarr:[
                {id: 1, role: 1, module_id: 0, module: "首页", level: 1, top_id: null, select_state:1},
                {id: 2, role: 1, module_id: 1, module: "数据报表", level: 1, top_id: null, select_state: 1,have_child: 1,},
                {id: 3, role: 1, module_id: 2, module: "财务报表（总）", level: 2, top_id: 2, select_state:1,export_state: 1},
                {id: 4, role: 1, module_id: 3, module: "财务报表（分）", level: 2, top_id: 2, select_state:1},
                {id: 5, role: 1, module_id: 4, module: "收益结算", level: 2, top_id: 2, select_state:1},
                {id: 6, role: 1, module_id: 5, module: "价格调整", level: 1, top_id: null, select_state:1,have_child: 1,},
                {id: 7, role: 1, module_id: 6, module: "洗车价格管理", level: 2, top_id: 6, select_state: 1,delete_state: 1,add_state:1,update_state: 1},
                {id: 8, role: 1, module_id: 7, module: "充值价格管理", level: 2, top_id: 6, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 9, role: 1, module_id: 8, module: "超时价格管理", level: 2, top_id: 6, select_state: 1,add_state: 1,update_state: 1},
                {id: 10, role: 1, module_id: 9, module: "收益结算管理", level: 2, top_id: 6, select_state: 1,update_state: 1},
                {id: 11, role: 1, module_id: 10, module: "一元洗车", level: 1, top_id: null, select_state: 1,have_child: 2},
                {id: 12, role: 1, module_id: 11, module: "一元洗车（总）", level: 2, top_id: 11, select_state: 1,update_state: 1},
                {id: 13, role: 1, module_id: 12, module: "一元洗车（分）", level: 2, top_id: 11, select_state: 1},
                {id: 14, role: 1, module_id: 13, module: "订单系统", level: 1, top_id: null, select_state: 1,have_child: 2},
                {id: 15, role: 1, module_id: 14, module: "洗车订单", level: 2, top_id: 14, select_state: 1},
                {id: 16, role: 1, module_id: 15, module: "充值订单", level: 2, top_id: 14, select_state: 1},
                {id: 17, role: 1, module_id: 16, module: "超时订单", level: 2, top_id: 14, select_state: 1,update_state: 1},
                {id: 18, role: 1, module_id: 17, module: "用户中心", level: 1, top_id: null, select_state: 1},
                {id: 19, role: 1, module_id: 18, module: "设备管理", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 20, role: 1, module_id: 19, module: "合作车辆", level: 1, top_id: null, select_state: 1,have_child: 2},
                {id: 21, role: 1, module_id: 20, module: "运营车辆", level: 2, top_id: 20, select_state: 1,delete_state: 1,update_state: 1},
                {id: 22, role: 1, module_id: 21, module: "运营申请", level: 2, top_id: 20, select_state: 1,update_state: 1},
                {id: 23, role: 1, module_id: 22, module: "权限", level: 1, top_id: null, select_state: 1,have_child: 1},
                {id: 24, role: 1, module_id: 23, module: "权限管理", level: 2, top_id: 23, select_state: 1,update_state: 1},
                {id: 25, role: 1, module_id: 24, module: "人员管理", level: 2, top_id: 23, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 26, role: 1, module_id: 25, module: "加盟商管理", level: 2, top_id: 23, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 27, role: 1, module_id: 26, module: "加盟商员工管理", level: 2, top_id: 23, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 28, role: 1, module_id: 27, module: "广告活动管理", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 29, role: 1, module_id: 28, module: "会员日管理", level: 1, top_id: null, select_state: 1,have_child: 1},
                {id: 30, role: 1, module_id: 29, module: "会员日", level: 2, top_id: 29, select_state: 1,update_state: 1},
                {id: 31, role: 1, module_id: 30, module: "会员日优惠券", level: 2, top_id: 29, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 32, role: 1, module_id: 31, module: "积分商城", level: 1, top_id: null, select_state: 1,have_child: 2},
                {id: 33, role: 1, module_id: 32, module: "商品管理", level: 2, top_id: 32, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 34, role: 1, module_id: 33, module: "商品分类", level: 2, top_id: 32, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 35, role: 1, module_id: 34, module: "商品订单", level: 2, top_id: 32, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 36, role: 1, module_id: 35, module: "券码兑换", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,export_state: 1,update_state: 1},
                {id: 37, role: 1, module_id: 36, module: "授权电话", level: 1, top_id: null, select_state: 1,update_state: 1},
                {id: 38, role: 1, module_id: 37, module: "城市管理", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 39, role: 1, module_id: 38, module: "推广员工", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,export_state: 1,update_state: 1},
                {id: 40, role: 1, module_id: 39, module: "积分管理", level: 1, top_id: null, select_state: 1,delete_state: 1,add_state: 1,update_state: 1},
                {id: 41, role: 1, module_id: 40, module: "视频管理", level: 1, top_id: null, select_state: 1,update_state: 1}
            ],                                                                                                                                                                                                                                                                                                                                            
            tableData: [
                {
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    children: [
                        {
                            id: 31,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            id: 32,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }
                    ]
                }, {
                    id: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ],
            authorityTable: []
        };
    },
    methods: {
        checkAll() {
            // 全选
            console.log("全选");
        },
        noAll() {
            // 全否
            console.log("全否");
        },
        // copyAll() {
        //     // 复制
        //     console.log("复制");
        // },
        saveAll() {
            // 保存  统一修改
            console.log("保存");
            // 二维对象数组转一维对象数组
            var arr = JSON.parse(JSON.stringify(this.authorityTable));
            for(let i=0;i<arr.length;i++){
                if(arr[i].children){
                    arr = arr.slice(0,i+1).concat(arr[i].children,arr.slice(i+1))
                    delete arr[i].children
                }
            }
            console.log(arr,this.defaultarr)
            // 对比修改的权限有哪些
            for(var i=0;i<this.defaultarr.length;i++){
                for(var o in this.defaultarr[i]) 
                    if(arr[i][o] !== this.defaultarr[i][o]){
                        // 修改值的打印，i="数组下标"，o="对象键名"
                        console.log(arr[i],this.defaultarr[i])
                        console.log("不一样",i)
                    }else{
                        // console.log("一样的",i)
                    }
            }
            
                
            // this.authorityTable.forEach(item => {
            //     // console.log(item.authorityValue)
            // })
        },
        // 权限列表获取
        selRole(index, row) {
            // 点击角色
            // console.log(index, row);
            this.selIndex = index;
            // console.log(this.selIndex)
            if(index){
                utils.request("/authority/list","post",JSON.stringify({page:1,list_rows:999,role:row.id})).then(resp=>{
                    console.log(resp)
                    let portdata = resp.data.data.data;
                    for(var i=0;i<this.defaultarr.length;i++){
                        for(var o in this.defaultarr[i]) this.defaultarr[i][o] = portdata[i][o]
                    }
                    let material = JSON.parse(JSON.stringify(this.defaultarr))
                    var result = []
                    // let obj = {}
                    // console.log(obj[0] = 123)
                    function toTree(data) {
                        // 第一步验证带入值是否是数组，不是就走人不执行
                        if (!Array.isArray(data)) {
                            return result
                        }

                        // 先删除需要创建二维数组的关键词，防止数据类型不对后面报错
                        data.forEach(item => {
                            delete item.children;
                        });

                        // 把用id作为键名，保存对应的值，用于后面数装归类
                        let map = {};
                        data.forEach(item => {
                            map[item.id] = item;
                        });
                        // console.log(map)

                        // 最后数据处理,forEach简化班的for循环一次出结果.
                        data.forEach(item => {
                            let parent = map[item.top_id];
                            // console.log(parent)
                            if (parent) {
                                (parent.children || (parent.children = [])).push(item);
                            } else {
                                result.push(item)
                            }
                            // console.log('对的数组',parent,'错的数组',result)
                        });
                        return result;
                    }
                    this.authorityTable = toTree(material);
                    // this.defaultarr = JSON.parse(JSON.stringify(this.authorityTable))
                    // console.log(this.authorityTable[0].add_state===false,this.authorityTable[0].add_state===undefined,this.authorityTable[0].add_state==="",this.authorityTable[0].add_state===null)
                    
                    // console.log(this.authorityTable[0].select_state!==true,this.authorityTable[0].select_state!==undefined,this.authorityTable[0].select_state!=="",this.authorityTable[0].select_state!==null)
                })
            }else{}
            this.authorityTable.forEach(item => {
                item.authorityValue = []; //切换角色时调接口获取当前角色的权限
            })
        },

        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;background:#f2f2f2;";
        },
        rowRightClass: function({ row, rowIndex }) {
            return "background:#f2f2f2;";
        },
        one(row, treeNode, resolve){
            console.log(row, treeNode, resolve)
        },
        selectChange(index,row) {
            // 查询状态修改
            // console.log(index, row);
            var data 
            if(row.select_state === 1){
                data = {
                    id:row.id,
                    select_state:row.select_state,
                    level:row.level
                }
            }else if(row.select_state === 2){
                data = {
                    id:row.id,
                    select_state:2,
                    add_state:2,
                    delete_state:2,
                    update_state:2,
                    export_state:2,
                    // have_child:2,
                    level:row.level
                }
            }else{return}
            row.top_id !== null ? data.top_id = row.top_id : "";
            // console.log(data)
            utils.request("/authority/update","post",JSON.stringify(data)).then(resp=>{
                if(resp.data.code === 200){
                    for(var i in row) data[i] !== undefined ? row[i] = data[i] : "";
                }else{return}
            })
        },
        addChange(index,row,childIndex,item){
            // 添加状态修改
            // console.log(index, row);
            var data 
            if(row.select_state===2){
                data = {
                    id:row.id, 
                    select_state:1, 
                    add_state:1, 
                    level:row.level
                }
            }else{
                data = {
                    id:row.id,
                    select_state: row.select_state,
                    add_state:row.add_state, 
                    level:row.level
                }
            }
            row.top_id !== null ? data.top_id = row.top_id : "";
            // console.log(data)
            utils.request("/authority/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    for(var i in row) data[i] !== undefined ? row[i] = data[i] : "";
                }else{return}
            })
        },
        deleteChange(index,row,childIndex,item){
            // 删除状态修改
            // console.log(index, row);
            var data 
            if(row.select_state===2){
                data = {
                    id:row.id, 
                    select_state:1, 
                    delete_state:1, 
                    level:row.level
                }
            }else{
                data = {
                    id:row.id,
                    select_state: row.select_state,
                    delete_state:row.delete_state, 
                    level:row.level
                }
            }
            row.top_id !== null ? data.top_id = row.top_id : "";
            console.log(data)
            utils.request("/authority/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    for(var i in row) data[i] !== undefined ? row[i] = data[i] : "";
                }else{return}
            })
        },
        updateChange(index,row,childIndex,item){
            // 修改状态修改
            // console.log(index, row);
            var data 
            if(row.select_state===2){
                data = {
                    id:row.id, 
                    select_state:1, 
                    update_state:1, 
                    level:row.level
                }
            }else{
                data = {
                    id:row.id,
                    select_state: row.select_state,
                    update_state:row.update_state, 
                    level:row.level
                }
            }
            row.top_id !== null ? data.top_id = row.top_id : "";
            console.log(data)
            utils.request("/authority/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    for(var i in row) data[i] !== undefined ? row[i] = data[i] : "";
                }else{return}
            })
        },
        exportChange(index,row,childIndex,item){
            // 导出状态修改
            // console.log(index, row);
            var data 
            if(row.select_state===2){
                data = {
                    id:row.id, 
                    select_state:1, 
                    export_state:1, 
                    level:row.level
                }
            }else{
                data = {
                    id:row.id,
                    select_state: row.select_state,
                    export_state:row.export_state, 
                    level:row.level
                }
            }
            row.top_id !== null ? data.top_id = row.top_id : "";
            console.log(data)
            utils.request("/authority/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    for(var i in row) data[i] !== undefined ? row[i] = data[i] : "";
                }else{return}
            })
        },
        haveChange(index,row,childIndex,item){
            // 二级菜单状态修改
            // console.log(index, row);
            var data 
            if(row.have_child === 1){
                data = {
                    id:row.id,
                    select_state: row.have_child,
                    have_child: row.have_child,
                    level:row.level
                }
            }else if(row.have_child === 2){
                data = {
                    id:row.id,
                    select_state:2,
                    add_state:2,
                    delete_state:2,
                    update_state:2,
                    export_state:2,
                    have_child:2,
                    level:row.level
                }
            }else{return}
            row.top_id !== null ? data.top_id = row.top_id : "";
            console.log(data)
            utils.request("/authority/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    for(var i in row) data[i] !== undefined ? row[i] = data[i] : "";
                }else{return}
            })
        },
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        // utils.request("/authority/list","post",JSON.stringify({page:1,list_rows:999})).then(resp=>{
        //     console.log(resp)
        // })
    },
    beforeCreate() {},
};
</script>

<style lang="scss" scoped>
.btn {
    display: flex;
    flex-flow: row wrap;
    .title {
        font-size: 22px;
        color: #333;
        margin-right: 15px;
        cursor: pointer;
        i {
            color: #5cb6ff;
            margin-right: 5px;
        }
    }
}

.table {
    display: flex;
    width: 100%;
    padding: 0 !important;
    border: 1px solid #666;
    box-sizing: border-box;
    border-radius: 0 !important;
    .table-left {
        width: 220px;
        .sel-tab {
            color: #409eff;
        }
    }
    .table-right {
        width: 100%;
        padding: 10px 10px 0px 10px;
        box-sizing: border-box;
        .el-table {
            .cell {
                height: 30px !important;
                line-height: 30px !important;
            }
        }
    }
}
</style>

